<template>
  <div style="margin-left:-25px">
    <!-- 回收率 -->
    <!-- <Echart
      :options="options"
      id="bottomRightChart"
      :height="chartHeight"
      width="100%"
    ></Echart> -->
    <Swiper class="swiper" :autoPlay="true" :showIndicator="false">
      <Slide>
		<Echart :options="options" id="topRightChart" :height="chartHeight" width="100%"></Echart>
        <!-- <dv-capsule-chart  :config="config_one" style="width: 92%" :style="{ height: chartHeight }"/> -->
      </Slide>
      <Slide>
			<Echart :options="options" id="topRightChart" :height="chartHeight" width="100%"></Echart>
        <!-- <dv-capsule-chart :config="config_two" style="width: 92%" :style="{ height: chartHeight }"/> -->
      </Slide>
    </Swiper>
  </div>
</template>

<script>
import Echart from "@/common/echart";
export default {
  data() {
    return {
      options: {},
    };
  },
  components: {
    Echart,
  },
  props: {
    config_recovery: {
      type: Object,
      default: () => ({}),
    },
    chartHeight: {
      type: [Number, String],
      default: "",
    },
  },
  methods: {
    //处理日期
    getDayNumByYearMonth(dateTime) {
      //删除并返回数组的最后一个元素
      var lastVal = dateTime.pop();
      //删除并返回数组的第一个元素
      var firstVal = dateTime.shift();
      //把日期时间统一处理为只有day格式
      var dateArr = dateTime.map((item) => {
        return item.slice(8);
      });
      //处理第一个元素并插回数组开头
      dateArr.unshift(firstVal.slice(5));
      //处理第最后一个元素并插回数组结尾
      dateArr.push(lastVal.slice(5));
      return dateArr;
    },
  },
  watch: {
    config_recovery: {
      handler(newData) {
        this.options = {
          tooltip: {
            //鼠标指上时的标线
            trigger: "axis",
            axisPointer: {
              lineStyle: {
                color: "#fff",
              },
            },
          },
          legend: {
            icon: "rect",
            itemWidth: 14,
            itemHeight: 5,
            itemGap: 13,
            data: ["一车间", "二车间"],
            right: "10px",
            top: "0px",
            textStyle: {
              fontSize: 12,
              color: "#fff",
            },
          },
          grid: {
            left: "3%",
            right: "5%", ///   调整大小
            bottom: "3%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              boundaryGap: false,
              axisLine: {
                lineStyle: {
                  color: "#57617B",
                },
              },
              axisLabel: {
                textStyle: {
                  color: "#fff",
                  fontSize: "10px",
                },
                // rotate:30,
                interval: 0,
              },
              data: this.getDayNumByYearMonth(newData.Time),
            },
          ],
          yAxis: [
            {
              type: "value",
              axisTick: {
                show: false,
              },
              axisLine: {
                lineStyle: {
                  color: "#57617B",
                },
              },
              axisLabel: {
                margin: 10,
                textStyle: {
                  fontSize: 14,
                },
                textStyle: {
                  color: "#fff",
                },
                formatter: function() {
                  return "";
                },
              },
              splitLine: {
                lineStyle: {
                  color: "#57617B",
                },
              },
            },
          ],
          series: [
            {
              name: "一车间",
              type: "line",
              smooth: true,
              lineStyle: {
                normal: {
                  width: 2,
                },
              },
              areaStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "rgba(137, 189, 27, 0.3)",
                      },
                      {
                        offset: 0.8,
                        color: "rgba(137, 189, 27, 0)",
                      },
                    ],
                    false
                  ),
                  shadowColor: "rgba(0, 0, 0, 0.1)",
                  shadowBlur: 10,
                },
              },
              itemStyle: {
                normal: {
                  color: "rgb(137,189,27)",
                },
              },
              data: newData.HSL1,
            },
            {
              name: "二车间",
              type: "line",
              smooth: true,
              lineStyle: {
                normal: {
                  width: 2,
                },
              },
              areaStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "rgba(0, 136, 212, 0.3)",
                      },
                      {
                        offset: 0.8,
                        color: "rgba(0, 136, 212, 0)",
                      },
                    ],
                    false
                  ),
                  shadowColor: "rgba(0, 0, 0, 0.1)",
                  shadowBlur: 10,
                },
              },
              itemStyle: {
                normal: {
                  color: "rgb(0,136,212)",
                },
              },
              data: newData.HSL2,
            },
          ],
        };
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>
